import React, { Component } from 'react';
import Knight from '../Knight/index.jsx';
import BoardSquare from './BoardSquare.jsx';

export default class Board extends Component {

  renderPiece = (x, y, [knightX, knightY]) => {
    if (x === knightX && y === knightY) {
      return <Knight />;
    }
  }

  renderSquare = (i, [knightX, knightY]) => {
    const { onSquareClick } = this.props;
    const x = i % 8;
    const y = Math.floor(i / 8);
    const isKnightHere = (x === knightX && y === knightY)
    const black = (x + y) % 2 === 1;
    const piece = isKnightHere ? <Knight /> : null;

    return (
      <div key={i} style={{ width: '12.5%', height: '12.5%' }}>
        <BoardSquare x={x} y={y} onSquareClick={onSquareClick}>
          {this.renderPiece(x, y, [knightX, knightY])}
        </BoardSquare>
      </div>
    );
  }

  renderSquares = () => {
    const { knightPosition = [0, 0] } = this.props;
    const squares = [];
    for (let i = 0; i < 64; i++) {
      squares.push(this.renderSquare(i, knightPosition));
    }
    return squares;
  }

  render() {
    return (
      <div style={
      {
        height: '100%',
        display: 'flex',
        flexWrap: 'wrap'
      }
      }>
        {this.renderSquares()}
      </div>
    );
  }
}